
<!--    <script>-->
<!--        checkRole('admin');-->
<!--    </script>-->

    <style>
        .saveUserBtn{
            margin-left: 120px;
            color:#fff;
            background-color:#40BEA6;
            border: 1px solid rgba(0,0,0,0.6);
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
        }
        .saveUserBtn:hover{
            background-color:#009688;
            color:#fff;
            cursor: pointer;
        }

        .resetUserBtn{
            color:#fff;
            background-color:#FFA500;
            border: 1px solid rgba(0,0,0,0.6);
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
            margin-left: 90px;
        }
        .resetUserBtn:hover{
            background-color:#FF8C00;
            color:#fff;
            cursor: pointer;
        }

        #userForm{
            width:90%;
            margin: 50px auto;
            padding: 10px 20px;
        }
        .area{
            width: 480px;
            margin:0 auto;
            padding-bottom: 20px;
            font-size: 20px;
            height: 60px;
        }
        .area input,select{
            font-size: 14px;
            border: 1px solid rgba(0,0,0,0.4);
            border-radius: 5px;
            height: 25px;
            line-height: 25px;
        }
        input::-webkit-input-placeholder{
            font-size: 16px;
            line-height: 25px;
        }
        input{
            font-size: 14px;
            width: 220px;
        }
        .tip{
            font-size: 10px;
            color: #6495ED;
            margin-left: 90px;
        }
        .inputName{
            width: 130px;
            display: inline-block;
            text-align: right;
        }
        select{
            width: 220px;
        }
        #userHeader{
            margin: 0 auto;
            padding-top: 30px;
            text-align: center;
            color: red;
        }
    </style>

    <div class="padding-big">
        <div id="userHeader">
            <h1>填写用户信息</h1>
        </div>
        <div id="userForm" >

            <div class="area">
                <div class="">
                    <div class="inputName">
                      <label for="username">用户账号:</label>
                    </div>
                    <input type="text" value=""
                           id="username" name="username" width="40%" maxlength="16" placeholder="请输入用户名"
                           onblur="checkSecUsername()" onfocus="removeSecUsernameText()"/>

                </div>
                <p class="tip">用户账号不能有除下划线减号外的特殊字符,且不超长16位</p>
            </div>

            <div class="area">
                <div  class="inputName">
                    <label for="idCard">身份证号:</label>
                </div>
                <input type="text" value="" id="idCard" name=" idCard" maxlength="18" placeholder="请输入身份证号"
                       onblur="checkIdCard()" onfocus="removeIdCardText()"/>
                <p class="tip">若尾号含有字母x，应为小写字母x</p>
            </div>

            <div class="area">
                <div class="inputName">
                <label for="phone">手机号码:</label>
                </div>
                <input type="text" value="" id="phone" name=" phone" maxlength="11" placeholder="请输入手机号码"
                       onblur="checkPhone()" onfocus="removePhoneText()"/>
            </div>

            <div class="area">
                <div class="inputName">
                <label for="userRole">用户角色:</label>
                </div>
                <select id="userRole">
                    <option value='operator' selected>业务操作员</option>
                    <option value='auditor'>业务审计员</option>
                    <option value='sysAuditor'>系统审计员</option>
                    <option value='admin'>系统管理员</option>
                </select>
            </div>

            <div class="area">
                <div class="inputName">
                <label for="type" selected>账号类型:</label>
                </div>
                <select id="type">
                    <option value='0' >临时账号</option>
                    <option value='1' selected>永久账号</option>
                </select>
            </div>

            <div class="area">
                <div class="inputName">
                <label for="accessTime">登录访问时段:</label>
                </div>
                <select id="accessTime">
                    <option value='0' selected >00:00:00-23:59:59</option>
                    <option value='1'>08:30:00-17:00:00</option>
                    <option value='2'>08:30:00-11:30:00</option>
                    <option value='3'>13:30:00-17:00:00</option>
                </select>
            </div>

            <div class="area">
                <div class="inputName">
                    <label for="ipAddress">客户端地址:</label>
                </div>
                <input type="text" value="" id="ipAddress" name=" ipAddress" maxlength="15" placeholder="请输入需要绑定的IP地址"
                       onblur="checkIpAddress()" onfocus="removeIpAddressText()"/>
                <p class="tip">非必填,绑定账号登录的固定IP地址</p>
            </div>

            <div class="area" style="margin-top: 20px;">
                <a href="javascript:void(0);" onclick="" class="saveUserBtn" id="saveSecUser">
                    提交
                </a>
                <a href="javascript:void(0);" onclick="" class="resetUserBtn" id="resetSecUser">
                    重置
                </a>
            </div>
        </div>
    </div>
    
    <script>
        isOnline("admin");
        //用户名正则，1到16位（字母，数字，下划线，减号）
        var usernamePattern = /^[\u4e00-\u9fa5_a-zA-Z0-9-]{1,16}$/;
        //ip地址
        var ipAddressPattern = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
        //身份证
        // 正则表达式
        //var idcardPattern = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|[x,X])$/;
        var idcardPattern=/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x)$/;
        //手机号码
        var phonePattern=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;

        $("#saveSecUser").live("click",function () {
            isOnline("admin");
            $("#saveUserBtn").attr("disabled","disabled");
            var username=$("#username").val();
            var idCard=$("#idCard").val();
            var phone=$("#phone").val();
            var ipAddress=$("#ipAddress").val();
            var userRole=$("#userRole option:selected").val();
            var type=$("#type option:selected").val();
            var accessTime=$("#accessTime option:selected").val();

            if(checkSecUsername()&&checkIpAddress()&&checkIdCard()&&checkIpAddress()){
                var data={
                    username:username,
                    idCard:idCard,
                    phone:phone,
                    ipAddress:ipAddress,
                    role:userRole,
                    type:type,
                    accessTime:accessTime
                };

                $.ajax({
                    url:HOST.concat("/secusers?usrname=")+getSessionStorage("username")+"&token="+config.token,
                    type:"POST",
                    data:JSON.stringify(data),
                    async:false,
                    contentType: "application/json",
                    success:function (data) {
                        data=JSON.parse(data);
                        if(data.meta.state=="success"){
                            $("#saveUserBtn").removeAttr("disabled");
                            alert(data.meta.message);
                            window.location.hash="#management";
                            userManagement();
                        }else{
                            alert(data.meta.message);
                        }
                    }
                });
            }
            // else{
            //     alert("填写信息有误!")
            //    return false;
            // }

        });

        function checkSecUsername() {
            var username = $("#username").val();
            removeSecUsernameText();
            if(username==''||username==undefined){
                $("#username").after("<span class='usernameText' style='color:red;font-size: 12px'>&nbsp;用户名不能为空</span>");
                return false;
            }else if(username.length>16){
                $("#username").after("<span class='usernameText' style='color:red;font-size: 12px'>&nbsp;用户名长度大于16位</span>");
                return false;
            }else if(usernamePattern.test(username)!=true){
                $("#username").after("<span class='usernameText' style='color:red;font-size: 12px'>&nbsp;用户名格式不规范</span>");
                return false;
            }else {
                var res;
                $.ajax({
                    url: HOST.concat("/checkusernameavailable?token="+config.token),
                    type:"get",
                    dataType:"json",
                    async:false,
                    data:{
                        "username":username
                    },
                    success:function (msg) {
                        res=msg;
                        if(msg.meta.state=="success"){
                            $("#username").after("<span class='usernameText' style='color:forestgreen;font-size: 12px'>&nbsp;✔用户名可用</span>");
                        }else{
                            $("#username").after("<span class='usernameText' style='color:red;font-size: 12px'>&nbsp;用户名已存在</span>");
                        }
                    }
                });

                if(res.meta.state=="success"){
                    return true;
                }else{
                    return false;
                }

            }
        }

        function removeSecUsernameText() {
            $(".usernameText").remove();
        }
        
        function checkIpAddress() {
            var ipAddress=$("#ipAddress").val();
            removeIpAddressText();
            if(ipAddress==""){
                return true;
            } else if(ipAddressPattern.test(ipAddress)!=true){
                $("#ipAddress").after("<span class='ipAddressText' style='color:red;font-size: 12px'>&nbsp;IP地址不规范</span>");
                return false;
            }else{
                return true;
            }
        }

        function removeIpAddressText() {
            $(".ipAddressText").remove();
        }

        function checkIdCard(){
            var idCard=$("#idCard").val();
            removeIdCardText();
            if(idcardPattern.test(idCard)!=true){
                $("#idCard").after("<span class='idCardText' style='color:red;font-size: 12px'>&nbsp;身份证输入有误</span>");
                return false;
            }else{
                return true;
            }
        }

        function  removeIdCardText(){
            $(".idCardText").remove();
        }

        function checkPhone(){
            var phone=$("#phone").val();
            removePhoneText();
            if(phonePattern.test(phone)!=true){
                $("#phone").after("<span class='phoneText' style='color:red;font-size: 12px'>&nbsp;手机号码输入有误</span>");
                return false;
            }else{
                return true;
            }
        }

        function  removePhoneText(){
            $(".phoneText").remove();
        }
        
        $("#resetSecUser").live("click",function () {
            isOnline("admin");
            $("#username").val("");
            $("#idCard").val("");
            $("#phone").val("");
            $("#userRole option:first").prop("selected", 'selected');
            $("#type option:first").prop("selected", 'selected');
            $("#accessTime option:first").prop("selected", 'selected');
            $("#ipAddress").val("");
        });

        $("#management").live("click",function () {
            window.location.hash="#management";
            userManagement();
        })

    </script>





